// import React, { useState, useEffect, useRef } from "react";
// import { getClassList, removeClassList, updateClassList, classiftList,createClassList } from '../../service/index';
// import type { ClassListItem } from '../../service/type';
// import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
// import type { ActionType, ProColumns } from '@ant-design/pro-components';
// import { ProTable, TableDropdown } from '@ant-design/pro-components';
// import { useNavigate } from 'react-router-dom';
// import {
//   Button,
//   Space,
//   Tag,
//   Drawer,
//   Cascader,
//   DatePicker,
//   Form,
//   Input,
//   InputNumber,
//   Mentions,
//   Segmented,
//   Select,
//   TreeSelect,
// }
//   from 'antd';
// import { reactHooksModule } from "@reduxjs/toolkit/query/react";

// const { RangePicker } = DatePicker;

// const formItemLayout = {
//   labelCol: {
//     xs: { span: 24 },
//     sm: { span: 6 },
//   },
//   wrapperCol: {
//     xs: { span: 24 },
//     sm: { span: 14 },
//   },
// };



// const ClassList = () => {
//   // 高级表格用的
//   const actionRef = useRef<ActionType>();
//   const navigate = useNavigate();
//   // 表单组件用的
//   const [form] = Form.useForm();
//   const variant = Form.useWatch('variant', form);
//   const [datas, setdatas] = useState([])
//   const [data, setdata] = useState([])
//   // 反选老师数据
//   const [techers,settechers] =useState([])
//   // 反选类别数据
//   const [classifys,setclassifys] =useState([])

//   const getData = async () => {
//     const res = await getClassList()
//     setdatas(res.data)
//     setdata(res.data)
//     // console.log(res.data.data.list)

//     // 反显老师的数据
//     const arrs=res.data.data.list.map(v=>v.teacher? v.teacher.username : '')
//     // 反显科目类别数据
//     const arr=res.data.data.list.map(v=>v.classify.name)
//     // console.log(arrs,arr)
//     // 去重
//     const newArrs= [...new Set(arrs)]
//     const newArr =[...new Set(arr)]
//     settechers( newArrs )
//     setclassifys( newArr )
//     // console.log(newArrs,newArr)
//   }
//   const valueEnums =(list:string[])=>{
//     return list.reduce((acc,item)=>{
//       if(item){
//         acc[item] = {text:item}
//       }
//       return acc
//     },{} as Record<string,{text: string }>)
//   }
//   const svalueEnum =(list:string[])=>{
//     return list.reduce((acc,item)=>{
//       acc[item] = {text:item}
//       return acc
//     },{} as Record<string,{text: string }>)
//   }
//   useEffect(() => {
//     getData()
//   }, [])
//   const handleSubmit = (values:any) => {
//     console.log('表单数据:', values);
//     // 这里可以继续添加提交逻辑
//     createClassList(values.Cascader, values.Input, values.Select)
//     setOpen(false);
//     actionRef.current?.reload(); // 刷新表格
//     // navigate(0);
//   };

//   // 抽屉用的
//   const [open, setOpen] = useState(false);
//   const showDrawer = () => {
//     setOpen(true);
//     form.resetFields();  // 打开前重置
//   };
//   const onClose = () => {
//     setOpen(false);

//   };

//   const columns: ProColumns<ClassListItem>[] = [
//     {
//       title: '排序',
//       dataIndex: 'index',
//       valueType: 'indexBorder',
//       width: 48,
//     },
//     {
//       title: '班级名称',
//       dataIndex: 'name',
//       ellipsis: true,
//       tooltip: '小米崽汁',
//       formItemProps: {
//         rules: [
//           {
//             required: true,
//             message: '必须填写',
//           },
//         ],
//       },
//     },
//     {
//       // // 列设置中disabled的状态
//       // disable: false,
//       title: '老师',
//       dataIndex: ['teacher', '_id'], // 使用路径访问id
//       ellipsis: true,
//       valueType: 'select',
//       valueEnum:valueEnums(techers),
//       render:(_,record) =>(
//         <Space>
//           {record.teacher?.username}
//         </Space>
//       ),
//       formItemProps: {
//         rules: [{ required: true, message: '请选择老师' }],
//       },
//     },
//     {
//       title: '科目类别',
//       dataIndex: ['classify', 'id'], // 使用路径访问id
//       valueType: 'select',
//       valueEnum:svalueEnum(classifys),
//       render:(_,record) =>(
//         <Space>
//           {record.classify.name}
//         </Space>
//       ),
//       formItemProps: {
//         rules: [{ required: true, message: '请选择科目类别' }],
//       },
//       // fieldProps: {
//       //   // 数据
//       //   // options: [],
//       //   showSearch: true,
//       //   filterOption: (input, option) => 
//       //     option.label.toLowerCase().includes(input.toLowerCase())
//       // },
//       // render: (_, record) => (
//       //   <Space>
//       //     {record.classify}
//       //   </Space>
//       // ),
//     },
//     {
//       title: '创建时间',
//       key: 'createdAt',
//       dataIndex: 'createdAt',
//       valueType: 'date',
//       sorter: true,
//       hideInSearch: true,
//       // 在编辑表格中是否可编辑的，函数的参数和 table 的 render 一样
//       editable: false,
//       onFilter: true
//     },
//     {
//       title: '操作',
//       valueType: 'option',
//       key: 'option',
//       render: (text, record, _, action) => [
//         <a
//           key={`editable${record._id}`}
//           onClick={() => {
//             action?.startEditable?.(record._id);
//           }}
//         >
//           编辑
//         </a>,
//         <a href='' target="" rel="noopener noreferrer" key="view">
//           查看
//         </a>,
//         // <TableDropdown
//         //   key="actionGroup"
//         //   onSelect={
//         //     async (key) => {
//         //       // action?.reload()
//         //       if (key === 'delete') {
//         //         console.log('删除')
//         //         try {
//         //           // 调用删除接口
//         //           await removeClassList(record._id);
//         //           console.log('删除成功')
//         //           // 重新加载表格数据
//         //           action?.reload();
//         //         } catch (e) {
//         //           console.log(e)
//         //         }
//         //       } else if (key === 'copy') {
//         //         try {
//         //           console.log('更新');
//         //           await updateClassList(record._id,record.name,record.classify._id,record.teacher._id,record.description,record.status);
//         //         } catch (e) {
//         //           console.error(e);
//         //         }
//         //       }
//         //     }
//         //   }
//         //   menus={[
//         //     { key: 'copy', name: '更新' },
//         //     { key: 'delete', name: '删除', danger: true },
//         //   ]}
//         // />,
//       ],
//     },
//   ];

//   return (
//     <>
//       <Drawer title="新建班级" onClose={onClose} open={open}>
//         <Form
//           {...formItemLayout}
//           // 经 Form.useForm() 创建的 form 控制实例，不提供时会自动创建
//           form={form}
//           // 表单内控件变体
//           variant={variant || 'filled'}
//           style={{ maxWidth: 600 }}
//           // 表单默认值，只有初始化以及重置时生效
//           initialValues={{ variant: 'filled' }}
//           onFinish={handleSubmit} // 添加提交回调
//         >
//           <Form.Item label="形态" name="variant">
//             <Segmented options={['outlined', 'filled', 'borderless', 'underlined']} />
//           </Form.Item>

//           <Form.Item
//             label="班级名称"
//             name="Input"
//             rules={[{ required: true, message: '请输入!' }]}>
//             <Input />
//           </Form.Item>

//           <Form.Item
//             label="班级进度"
//             name="Select"
//             rules={[{ required: true, message: '请输入!' }]}
//           >
//             <Select
//               showSearch
//               filterOption={(input, option) =>
//                 (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
//               }
//               options={
//                 data.data?.list.map((it, i) => { return { key: i, value: it.classify._id, label: it.name } })
//               }

//             />
//           </Form.Item>

//           <Form.Item
//             label="老师"
//             name="Cascader"
//             rules={[{ required: true, message: '请输入!' }]}
//           >
//             <Select
//               options={
//                 datas.data?.list.map((it, i) => { return { key: i, value: it.teacher?._id, label: it.teacher?.username } })
//               }
//             />
//           </Form.Item>

//           <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
//             <Button type="primary" htmlType="submit"
//             >
//               确定
//             </Button>
//           </Form.Item>
//         </Form>
//       </Drawer>
//       <ProTable<ClassListItem>
//         columns={columns}
//         actionRef={actionRef}
//         cardBordered
//         request={async (params, sort, filter) => {
//           const { current, pageSize, lastOnlineTime,  ...otherParams } = params
//           // console.log(current, pageSize, lastOnlineTime,otherParams)
//           const res = await getClassList({ 
//             page: params.current!,
//             pagesize: params.pageSize!,
//             ...otherParams
//            });

//           // console.log(res.data)
//           return {
//             data: res.data.data?.list,
//             success: true,
//             total: res.data.data?.total,
//           }
//         }}
//         editable={{
//           type: 'multiple',
//           onSave: async (key, {...row}, originRow) => {
//             const params = {
//               id: row._id,
//               name: row.name,
//               classify: row.classify?._id || row.classify, // 兼容处理
//               teacher: row.teacher?._id || row.teacher,    // 兼容处理
//               description: row.description || '',
//               status: row.status || 0
//             };
//             // key: 行的唯一标识
//             // row: 当前编辑的行数据
//             // originRow: 原始行数据
//             try {
//               await updateClassList(
//                 params.id,
//                 params.name,
//                 params.classify,
//                 params.teacher,
//                 params.description,
//                 params.status
//               ) // 调用更新接口
//               console.log(row)
//               actionRef.current?.reload();
//               // message.success('保存成功');
//             } catch (error) {
//               // message.error('保存失败');
//             }
//           },
//           onDelete: async (key, {...row}) => {
//             try {
//               await removeClassList(row._id); // 调用删除接口
//               actionRef.current?.reload();
//               // message.success('删除成功');
//               return true; // 返回 true 表示删除成功，表格会更新
//             } catch (error) {
//               // message.error('删除失败');
//               return false; // 返回 false 表示删除失败，表格不会更新
//             }
//           },
//           onChange:(editableKeys, editableRows) => {
//             console.log('当前编辑行:', editableRows);
//           }
//         }}
//         rowKey="_id"
//         search={{
//           labelWidth: 'auto',
//         }}
//         pagination={{
//           pageSize: 5,
//           // onChange: (page) => console.log(page),
//         }}
//         dateFormatter="string"
//         headerTitle="班级列表"
//         toolBarRender={() => [
//           <Button key="button" icon={<PlusOutlined />} type="primary" onClick={() => showDrawer()}>新建班级</Button>
//         ]}
//       />
//     </>

//   );
// };
// export default ClassList;







import React, { useState, useEffect, useRef } from "react";
import { getClassList, removeClassList, updateClassList, classiftList, createClassList } from '../../service/index';
import type { ClassListItem } from '../../service/type';
import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable, TableDropdown } from '@ant-design/pro-components';
import { useNavigate } from 'react-router-dom';
import {
  Button,
  Space,
  Tag,
  Drawer,
  Cascader,
  DatePicker,
  Form,
  Input,
  InputNumber,
  Mentions,
  Segmented,
  Select,
  TreeSelect,
} from 'antd';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 14 },
  },
};

const ClassList = () => {
  const actionRef = useRef<ActionType>();
  const navigate = useNavigate();
  const [form] = Form.useForm();
  const variant = Form.useWatch('variant', form);
  const [datas, setdatas] = useState<any>({});
  const [data, setdata] = useState<any>({});
  const [techers, settechers] = useState<Array<{ value: string, label: string }>>([]);
  const [classifys, setclassifys] = useState<Array<{ value: string, label: string }>>([]);

  const getData = async () => {
    const res = await getClassList();
    console.log(res.data)
    setdatas(res.data);
    setdata(res.data);

    // 处理老师数据
    const teacherOptions = res.data.data?.list
      .filter(v => v.teacher)
      .map(v => ({
        value: v.teacher._id,
        label: v.teacher.username
      }));

    // 处理科目类别数据
    const classifyOptions = res.data.data?.list
      .filter(v => v.classify)
      .map(v => ({
        value: v.classify._id,
        label: v.classify.name
      }));
    // console.log(teacherOptions,classifyOptions)
    settechers(teacherOptions || []);
    setclassifys(classifyOptions || []);

  };

  useEffect(() => {
    getData();
  }, []);

  const handleSubmit = async (values: any) => {
    try {
      await createClassList(
        values.Cascader, // 老师ID
        values.Input,    // 班级名称
        values.Select    // 分类ID
      );
      setOpen(false);
      actionRef.current?.reload();
    } catch (error) {
      console.error('创建失败:', error);
    }
  };

  // 抽屉相关
  const [open, setOpen] = useState(false);
  const showDrawer = () => {
    setOpen(true);
    form.resetFields();
  };
  const onClose = () => {
    setOpen(false);
  };

  const columns: ProColumns<ClassListItem>[] = [
    {
      title: '排序',
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: '班级名称',
      dataIndex: 'name',
      ellipsis: true,
      formItemProps: {
        rules: [{ required: true, message: '必须填写' }],
      },
    },
    {
      title: '老师',
      dataIndex: ['teacher', '_id'],
      key: 'teacher',
      valueType: 'select',
      valueEnum: techers.reduce((acc, item) => {
        acc[item.value] = { text: item.label };
        return acc;
      }, {} as Record<string, { text: string }>),
      render: (_, record) => <Space>{record.teacher?.username}</Space>,
      formItemProps: {
        rules: [{ required: true, message: '请选择老师' }],
      },
    },
    {
      title: '科目类别',
      dataIndex: ['classify', '_id'],
      key: 'classify',
      valueType: 'select',
      valueEnum: classifys.reduce((acc, item) => {
        acc[item.value] = { text: item.label };
        return acc;
      }, {} as Record<string, { text: string }>),
      render: (_, record) => <Space>{record.classify?.name}</Space>,
      formItemProps: {
        rules: [{ required: true, message: '请选择科目类别' }],
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      valueType: 'date',
      sorter: true,
      hideInSearch: true,
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: (text, record, _, action) => [
        <a key={`editable-${record._id}`} onClick={() => action?.startEditable?.(record._id)}>
          编辑
        </a>,
        <a href='' target="_blank" rel="noopener noreferrer" key={`view-${record._id}`}>
          查看
        </a>,
      ],
    },
  ];

  return (
    <>
      <Drawer title="新建班级" onClose={onClose} open={open}>
        <Form
          {...formItemLayout}
          form={form}
          variant={variant || 'filled'}
          style={{ maxWidth: 600 }}
          initialValues={{ variant: 'filled' }}
          onFinish={handleSubmit}
        >
          <Form.Item label="形态" name="variant">
            <Segmented options={['outlined', 'filled', 'borderless', 'underlined']} />
          </Form.Item>

          <Form.Item
            label="班级名称"
            name="Input"
            rules={[{ required: true, message: '请输入!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="科目类别"
            name="Select"
            rules={[{ required: true, message: '请选择!' }]}
          >
            <Select
              showSearch
              optionFilterProp="label"
              options={classifys}
            />
          </Form.Item>

          <Form.Item
            label="老师"
            name="Cascader"
            rules={[{ required: true, message: '请选择!' }]}
          >
            <Select
              showSearch
              optionFilterProp="label"
              options={techers}
            />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
            <Button type="primary" htmlType="submit">
              确定
            </Button>
          </Form.Item>
        </Form>
      </Drawer>

      <ProTable<ClassListItem>
        columns={columns}
        actionRef={actionRef}
        cardBordered
        request={async (params) => {
          const res = await getClassList({
            page: params.current!,
            pagesize: params.pageSize!,
            ...params
          });
          return {
            data: res.data.data?.list,
            success: true,
            total: res.data.data?.total,
          };
        }}
        editable={{
          type: 'multiple',
          onSave: async (key, row) => {
            try {
              const params = {
                id: row._id,
                name: row.name,
                classify: row.classify?._id || row.classify,
                teacher: row.teacher?._id || row.teacher,
                description: row.description || '',
                status: row.status || 0
              };

              await updateClassList(
                params.id,
                params.name,
                params.classify,
                params.teacher,
                params.description,
                params.status
              );

              actionRef.current?.reload();
            } catch (error) {
              console.error('保存失败:', error);
            }
          },
          onDelete: async (key, row) => {
            try {
              await removeClassList(row._id);
              actionRef.current?.reload();
              return true;
            } catch (error) {
              console.error('删除失败:', error);
              return false;
            }
          },
        }}
        rowKey="_id"
        search={{ labelWidth: 'auto' }}
        pagination={{ pageSize: 5 }}
        dateFormatter="string"
        headerTitle="班级列表"
        toolBarRender={() => [
          <Button key="button" icon={<PlusOutlined />} type="primary" onClick={showDrawer}>
            新建班级
          </Button>
        ]}
      />
    </>
  );
};

export default ClassList;